<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>

    <style>
        body{
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        #nav{
            height: 60px;
            background-color: white;
            border-bottom: 1px solid;
        }
        .nav>.title{
            font-size: 2em;
            font-weight: bold;
            padding: 0px 10px;
            margin: 0px;
            float: left;
            line-height: 60px;
        }
        .nav > a{
            font-size:1.2em;
            float:right;
            display:block;
            text-decoration:none;
            color:#666;
            padding:0px 20px;
            margin:10px;
            border-top:4px solid #fff;
            line-height:40px;
        }
        .nav > a:hover{ border-top:4px #639 solid;}
        a.btn-back {
            height:48px;
            width:48px;
            position:fixed;
            right:0px;bottom:0px;
        }

        .container{padding:20px;float:none; clear:both;}
        .container > .title{font-size:1.6em; font-weight:bold; text-align:left;padding:10px 0px;}
        .container > .text{font-size:1em; text-align:left;line-height:1.5em;}
        .container > .headimg{width:200px;height:200px;float: right}

        .table {border:1px solid #000; border-collapse:collapse;}
        .table td{border:1px solid #000; border-collapse:collapse; padding:10px;font-size:1.2em;}
        .table th{border:1px solid #000;border-collapse:collapse; font-weight:bold; text-align:center;padding:10px;}

        .skillBorder{width:208px;margin:10px;float:left;margin:10px 10px 10px 0px;padding:5px;border:1px solid #639;overflow: hidden}
        .skillBorder > img{width:180px;height:180px;border:4px solid #fff;display:inline-block;float: right}
        .skillBorder > m{
            word-wrap: break-word;position: relative;top:50px;
            font-size:1em;width:20px;display:block;line-height:24px;background-color:#639;color:#fff; margin:0px auto;float: left}

        .connectpage{
            width:160px;
            height:32px;
            margin:10px 10px 10px 0px;
            display: inline-block;
            padding:5px;
        }
        .connectpage > img{
            width:32px;
            height:32px;
            display:inline-block;
        }
        .connectpage > div{
            font-size:1em;
            height:32px;
            line-height:32px;
            margin-left:3px;
            display:inline-block;
            width:125px;
            color:#fff;
        }

        .bg-primary { background-color:#639;color:#fff; }
        .bg-default { background-color:#fff;color:#000; }
        .bg-info { background-color:#eee;color:#000; }
    </style>

</head>
<body>

<a class="btn-back" href="#nav"><img src="../back.png"></a>
<div id="nav" class="nav">
    <div class="title">我的主页</div>
    <a href="#connect">与我联系</a>
    <a href="#skill">专长</a>
    <a href="#study">学习成绩</a>
    <a href="#jianjie">简介</a>
</div>

<div id="jianjie" class="container bg-primary">
    <img src="../headimg.jpg" class="headimg">
    <div class="title">自我简介</div>
    <p class="text">
        你好，我是刘嘉源，来自2019级软件工程班。网页设计是我的工作也是我的兴趣爱好，希望以后继续努力，做更好的网站！
        本人性格开朗，乐于助人，无论是在生活中还是在工作中，人缘都很好，我这样的性格有助于整个工作团队的团队凝聚力。
        对待工作，我一直都保持着一个比较认真的态度，我的工作能力很强，在处理问题的过程中，能力一直是很高的，
        对于专业知识的掌握很好，所以能够胜任这种工作。在工作中，我一直都具备较强的责任心，创意丰富的我，
        相信一定能够在IT行业中发光发热。在工作中，处理问题的能力很强，丰富的工作经验，也就能够看出，我在工作中不俗的工作能力了。你好，我是刘嘉源，来自2019级软件工程班。网页设计是我的工作也是我的兴趣爱好，希望以后继续努力，做更好的网站，呵呵！
    </p>
</div>

<div id="study" class="container bg-info">
    <div class="title">学习成绩</div>
    <table class="table">
        <tbody>
        <tr>
            <th colspan="2">学年与学期</th>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        <tr>
            <th rowspan="4">大一</th>
            <th rowspan="2">第一学期</th>
            <th>高等数学</th>
            <th>80</th>
        </tr>
        <tr>
            <th>大学英语</th>
            <th>78</th>
        </tr>
        <tr>
            <th rowspan="2">第二学期</th>
            <th>数据结构</th>
            <th>75</th>
        </tr>
        <tr>
            <th>计算方法</th>
            <th>82</th>
        </tr>
        </tbody>
    </table>
</div>

<div id="skill" class="container bg-default">
    <div class="title">专长</div>
    <div class="skillBorder">
        <m>J AVA</m>
        <img src="../skill03.png">
    </div>
    <div class="skillBorder">
        <m>网页设计</m>
        <img src="../skill01.png">
    </div>
    <div class="skillBorder">
        <m>安卓开发</m>
        <img src="../skill07.png">
    </div>

</div>
<div id="connect" class="container bg-primary">
    <div class="title">与我联系</div>
    <a class="connectpage">
        <img src="../icon02.png">
        <p>12345678901</p>
    </a>
    <a class="connectpage">
        <img src="../icon03.png">
        <p>1234567890</p>
    </a>
    <a class="connectpage">
        <img src="../icon04.png"\>
        <p>1234567890@qq.com</p>
    </a>
</div>

</body>
</html>